<template>
  <a-layout class="main-page">
    <a-layout-header class="main-page-top" :style="{ backgroundColor: userStore.headerBgColor }">
      <Top />
    </a-layout-header>
    <a-layout class="main-page-content-wrap">
      <a-layout-sider
        class="main-page-menu-wrap"
        :style="{ backgroundColor: userStore.menuColor.bgColor }"
        v-model:collapsed="isCollapse"
      >
        <Menu @setCollapse="() => setCollapse()" :isCollapse="isCollapse" />
      </a-layout-sider>
      <a-layout-content class="main-page-content">
        <Tags />
        <div class="main-page-content-router-view">
          <div class="main-page-content-router-view-scroll">
            <router-view v-slot="{ Component }">
              <component
                :is="Component"
                v-if="$route && $route.meta && $route.meta.keepAlive === false"
              />
              <keep-alive v-else>
                <component :is="Component" />
              </keep-alive>
            </router-view>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import Top from './top.vue'
import Menu from './menu.vue'
import Tags from './tags.vue'

const userStore = useUserStore()

const isCollapse = ref(false)

const setCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style scoped lang="scss">
.main-page {
  width: 100%;
  height: 100%;
  .main-page-content-wrap {
    display: flex;
    width: 100%;
    .main-page-menu-wrap {
      height: 100%;
    }
    .main-page-content {
      height: 100%;
      .main-page-content-router-view {
        height: calc(100% - 30px);
        padding: 10px 5px 5px 10px;
        .main-page-content-router-view-scroll {
          width: 100%;
          height: 100%;
          background: white;
          box-shadow: 0 0 5px #ccc;
          border-radius: 5px;
          overflow-y: auto;
          padding: 10px;
        }
        .main-page-content-router-view-scroll::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
}
</style>